<template>
  <div class="wrapper">
    <!-- 顶部导航位置 -->
    <van-nav-bar
      :title="this.aa ? '地址管理' : '选择地址'"
      left-text="返回"
      left-arrow
      @click-left="goConfirmOrder"
    />
    <!-- 顶部蓝色背 -->
    <div class="backgroundColor"></div>
    <!-- 选择地址组件 -->
    <!-- 包裹组件的最大盒子 用于相对定位 -->
    <div class="address_item_box">
      <!-- 包裹所有地址信息列表的盒子  用于绝对定义 -->
      <div class="address_item">
        <!-- 包裹每个组件的盒子  用于制作下边框 -->
        <van-address-list
          v-model="chosenAddressId"
          :list="list"
          :switchable="switchable"
          default-tag-text="默认"
          @add="goAddAddressPage"
          @edit="edit"
          @select="selectaddress"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SelectAddress",
  data() {
    return {
      // 控制单选框的选择
      chosenAddressId: 0,

      // 在调用获取接口的方法处理后需要渲染的数据
      list: [],

      // 控制选择地址页面的复选框是否出现
      switchable: true,

      // 为什么要接收sids的解释
      // 接收从ConfirmOrder选择地址页面传过来的sids,
      // 因为从ConfirmOrder选择地址页面跳转过来, ConfirmOrder选择地址页面的sids会消失,
      // 为什么sids会消失,
      // 因为ConfirmOrder选择地址页面的sids 是从Shopbag购物车跳转到ConfirmOrder页面时传过去的,
      // 所以当ConfirmOrder页面跳转到其他路由时, 再从其他路由回来时, sids将消失,
      // 所以在这个页面所有的跳转都要带着sids
      sids: "",

      // 选择的地址的aid  再点击确认按钮跳转至确定订单页面并将aid传过去
      aid: "",

      // aa 判断是从我的页面进来还是从结算界面进来
      aa: "",
    };
  },
  created() {
    // 调用获取接口的方法
    this.getfindAddress();

    // 为什么要接收sids的解释
    // 接收从ConfirmOrder选择地址页面传过来的sids,
    // 因为从ConfirmOrder选择地址页面跳转过来, ConfirmOrder选择地址页面的sids会消失,
    // 为什么sids会消失,
    // 因为ConfirmOrder选择地址页面的sids 是从Shopbag购物车跳转到ConfirmOrder页面时传过去的,
    // 所以当ConfirmOrder页面跳转到其他路由时, 再从其他路由回来时, sids将消失,
    // 所以在这个页面所有的跳转都要带着sids
    this.sids = this.$route.query.sids;
    this.aa = this.$route.query.aa;
  },

  methods: {
    // 跳转到ConfirmOrder确认订单页面
    goConfirmOrder() {
      if (this.aa) {
        this.$router.push({ name: "My" });
      } else {
        this.$router.push({ name: "ConfirmOrder", query: { sids: this.sids } });
      }
    },

    // 跳转至新建地址页面
    goAddAddressPage() {
      this.$router.push({ name: "AddAddress", query: { sids: this.sids ,aa:this.aa} });
    },

    // 获取已经存在的地址
    getfindAddress() {
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      this.axios({
        method: "GET",
        url: "/findAddress",
        params: {
          tokenString,
        },
      })
        .then((res) => {
          // 因为后面需要aid, 所以将res.data.result的数据储存起立
          this.res = res.data.result;
          // 
          // 把res处理成渲染需要的数据
          let list = [];
          let data = res.data.result;
          // 为了方便获取, 将res.data.result 所有地址存入data
          // 循环data, 將数据循环成渲染需要的格式
          for (let i = 0; i < data.length; i++) {
            let item = {};
            item.id = i;
            item.name = data[i].name;
            item.tel = data[i].tel;
            item.address = `${data[i].province}${data[i].city}${data[i].county}${data[i].addressDetail}`;
            item.isDefault = !!data[i].isDefault;
            item.province = data[i].province;
            item.city = data[i].city;
            item.county = data[i].county;
            item.areaCode = data[i].areaCode;
            item.addressDetail = data[i].addressDetail;
            item.aid = data[i].aid;
            list.push(item);
          }
          // 将处理好的数据赋值给data函数里面的list
          this.list = list;
          
          for(let i = 0 ; i < list.length; i++){
            if(list[i].isDefault){
              this.chosenAddressId = i
            }else{
              this.chosenAddressId = 0
            }
          }
        })
        .catch((err) => {
          
        });
    },

    // 跳转到编辑地址并且带上aid  这个参数要给设置为可有可无
    edit(item) {
      // 
      this.$router.push({
        name: "AddAddress",
        query: { aid: item.aid, sids: this.sids, aa: this.aa },
      });
    },

    //点击选择地址 获取地址的aid
    selectaddress(item) {
      if (this.aa) {
        return
      }
      this.aid = item.aid;
      this.$router.push({
        name: "ConfirmOrder",
        query: { aid: this.aid, sids: this.sids },
      });
    },
  },
};
</script>

<style lang="less" scoped>
// 修改顶部编辑按钮的字样色
/deep/ .van-nav-bar__right .van-nav-bar__text {
  color: #333;
}

// 修改单选框颜色
/deep/.van-address-item .van-radio__icon--checked .van-icon {
  background: blue;
  border: blue;
}

// 默认选项的背景颜色
/deep/.van-tag--danger {
  background: blue;
}
// 顶部背景颜色
.backgroundColor {
  width: 100%;
  height: 150px;
  background: blue;
}

// <!-- 包裹选择地址组件的盒子 -->
.address_item_box {
  position: fixed;
  top: 46px;
  bottom: 49px;
  right: 0;
  left: 0;
  overflow-y: auto;
  .address_item {
    position: absolute;
    margin-top: 20px;
    top: 50px;
    right: 0;
    left: 0;
  }
  // 修改组件van-address-item的圆角
  .van-address-item {
    border-bottom: 1px solid #000;
    border-radius: 10px 10px 0 0;
  }
  //  修改组件新增地址按钮的背景颜色和边框
  .van-button--danger {
    background: blue;
    border: blue;
  }
  // 将包裹着组件新增按钮的盒子背景设置为透明 否则会出翔边框
  /deep/.van-address-list__bottom {
    background-color: transparent;
  }
}
</style>